﻿<%@ page title="" language="C#" masterpagefile="~/Site.master" autoeventwireup="true" inherits="ServiceUsers, MainSite" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContent" runat="Server">
    <div class="contentfull">
        <div class="breadcrumbs">
            <ul id="crumbs">
                <li><a title="My Account" href="/account/">My Account</a>
                    <img src=Content/Images/separator.png alt="&rarr;" class="separator">
                    Services 			</li>
            </ul>
        </div>

        <div id="showMessages"></div>

        <div class="top">
            <div class="innerleft">
                <h1>Edit Service &#8220;<%= SrvDetails.ServiceName %>&#8221; - Step 3</h1>
            </div>
            <ol id="wizard-menu" class="group">
                <li title="Select service type" style="width: 16.50%; float: left">
                    <a href="ServiceType.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-before group red" id="step1">
                        <img src="Images/scan48.png" alt="Type">
                        <span class="mobile_disabled">Type</span>
                    </a>
                </li>
                <li title="Name this service." style="width: 16.50%; float: left">
                    <a href="ServiceName.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-before group green" id="step2">
                        <img src="Images/service48.png" alt="Name">
                        <span class="mobile_disabled">Name</span>
                    </a>
                </li>
                <li title="Authorize users for this service." style="width: 16.50%; float: left">
                    <a href="ServiceUsers.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-active group orange" id="step3">
                        <img src="Images/user48.png" alt="Users">
                        <span class="mobile_disabled">Users</span>
                    </a>
                </li>
                <li title="Ask questions alongside each scan made by this service." style="width: 16.50%; float: left">
                    <a href="ServiceQuestions.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-after group gold" id="step4">
                        <img src="Images/question48.png" alt="Questions">
                        <span class="mobile_disabled">Questions</span>
                    </a>
                </li>
                <li title="Modify advanced settings" style="width: 16.50%; float: left">
                    <a href="ServiceAdvanced.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-after group blue" id="step5">
                        <img src="Images/optional48.png" alt="Advanced">
                        <span class="mobile_disabled">Advanced</span>
                    </a>
                </li>
                <li title="Done" style="width: 16.50%; float: left">
                    <a href="ServiceDone.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-after group purple" id="review">
                        <img src="Images/confirm48.png" alt="Done">
                        <span class="mobile_disabled">Done</span>
                    </a>
                </li>
            </ol>
        </div>
        <div class="content">
            <form method="post" action="ServiceQuestions.aspx">
                <input type="hidden" name="action" value="editUsers" />
                <input type="hidden" name="serviceid" value="<%= ServiceId.ToString() %>">
                <div class="wizard-nav">
                    <input type="submit" name="login" value="Save and Continue" class="black_button blarge next" />
                </div>
                <h2 class="large">Authorize Users</h2>
                <span class="lower_comment same">Set permissions for the users you would like to access this service.</span>

                <fieldset>


                    <span class="label" id="header1">Filter Users: </span>
                    <div style="clear: both;"></div>
                    <br>

                    <div id="checkbox_list2" class="indent1" style="display: block">
                        <input type="checkbox" id="select_all">
                        <label for="select_all">Select ALL</label>
                        <br />
                        <div class="wrapper">
                            <ul id="user_checkbox_list">
                                 <%= LoadUserList() %>
                               
                            </ul>
                        </div>
                    </div>

                    <script>

                        $(document).ready(function () {
                            function listFilter(header, list) {
                                input = $("<input>").attr({ "id": "filtertext", "class": "filterinput inputnormalwide", "type": "text", "placeholder": "Type to begin filtering..." }),
                                clear = $("<span>").text("clear").attr({ "id": "clear_filter" });

                                $(clear).insertAfter(header);
                                $(input).insertAfter(header);

                                $(clear).hide();

                                $(input).change(function () {

                                    if ($(input).val().length > 0) {
                                        $(clear).show();
                                    }
                                    else {
                                        $(clear).hide();
                                    }

                                    var filter = $(this).val().toLowerCase();
                                    if (filter) {
                                        $(list).find("label").each(function () {
                                            if ($(this).text().toLowerCase().indexOf(filter) === -1) {
                                                $(this).parent().slideUp();
                                            } else if ($(this).text().toLowerCase().indexOf(filter) !== -1) {
                                                $(this).parent().slideDown();
                                            }
                                        });
                                    } else {
                                        $(list).find("label:not(:empty)").parent().slideDown();
                                        $("#select_all").attr('checked', true);
                                    }
                                    return false;
                                })
                                .keyup(function () {
                                    $(this).change();
                                });
                            }


                            listFilter($("#header1"), $("#user_checkbox_list"));
                            $("#clear_filter").click(function (event) {
                                $('#filtertext').val('');
                                $('#filtertext').change();
                            });

                        });


                        $("#select_all").live("change", function (event) {
                            $($('input:[id^="inputee"]').filter(':visible')).attr('checked', $(this).is(':checked')).next().css('font-weight', $(this).is(':checked') ? 'bold' : 'normal');
                        });

                        $("#select_all").attr('checked', true);

                        $('input:[id^="inputee"]').live("change", function (event) {
                            var unchecked_present = true;
                            $('input:[id^="inputee"]').each(function (i) {
                                if (!$(this).is(':checked')) {
                                    unchecked_present = false;
                                }
                            });
                            $("#select_all").attr('checked', unchecked_present);
                            $(this).next().css('font-weight', $(this).is(':checked') ? 'bold' : 'normal');
                        });


                    </script>

                    <div style="clear: both;"></div>
                    <br />
                    <input type="submit" name="login" value="Save and Continue" class="black_button blarge right" />
                    <button class="black_button blarge" id="createNewUser">Add a User</button>
                    <br />
                </fieldset>
            </form>

            <fieldset id="createNewUserFieldset" style="display: none;">
                <h2>Create a New User</h2>
                <form id="createNewUserForm" method="POST">
                    <input type="hidden" name="action" value="userQuickCreate" />
                    <label for="newUserName">Username</label>
                    <input type="text" id="newUserName" name="newUserName" class="inputed">
                    <label for="newUserPassword">Password</label>
                    <input type="text" name="newUserPassword" id="newUserPassword" class="inputed" />
                    <input type="submit" class="black_button blarge" value="Create" />
                </form>
            </fieldset>
            <script>
                $(document).ready(function () {



                    $("#createNewUser").click(function (event) {
                        if ($('#createNewUserFieldset').is(':visible')) {
                            $("#createNewUserFieldset").slideUp();
                        } else {
                            $("#createNewUserFieldset").slideDown();
                        }
                        return false;
                    });

                    $("#createNewUserForm").submit(function (event) {
                        var reInteger = /^\d+$/;
                        var serialized = $(this).serialize()
                        $.ajax({
                            type: "POST",
                            data: serialized,
                            success: function (msg) {
                                if (reInteger.test(msg)) {
                                    var id = msg;
                                    $("#checkbox_list2").show(); $(".tohide").hide();
                                    var last_li = $("#checkbox_list2 > div.wrapper:first > ul > li:last");
                                    var last_li2 = $(last_li).clone().hide().insertAfter(last_li);
                                    last_li2.find('input').attr('value', id).attr('id', 'inputee_' + id);
                                    last_li2.find('label').html($("input#newUserName").attr('value')).attr('for', 'inputee_' + id);
                                    last_li2.find('a').attr('title', "Edit user '" + $("input#newUserName").attr('value') + "'").attr('href', '/account/users/' + id + '/');
                                    last_li2.show().effect('bounce', { times: 3, distance: 50, direction: 'left' }, 300, function () {
                                        $("#createNewUserFieldset").slideUp();
                                        $("#showMessages").hide().html("<div class=\"success\"><p><li>User has been created.</li></p></div>").slideDown();
                                        $("input#newUserName").val('');
                                        $("input#newUserPassword").val('');
                                    });
                                } else {
                                    $("#showMessages").hide().html(msg).slideDown();
                                }
                            }
                        });
                        return false;
                    });

                    // Code was here

                });
            </script>

        </div>
    </div>
    <!-- /.contentfull -->
</asp:Content>

